<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('订单统计')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li class="select-time">
                            <p>时间：</p>
                            <select name="dateFilteType" heigh="80px" id="dateFilteType">
                                <option th:selected="${dateFilteType==0}" value="0">本日</option>
                                <option th:selected="${dateFilteType==1}" value="1">本周</option>
                                <option th:selected="${dateFilteType==2}" value="2">本月</option>
                            </select>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="dateFilteType()"><i
                                    class="fa fa-search"></i>&nbsp;搜索</a>
                            <!--<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i-->
                                    <!--class="fa fa-refresh"></i>&nbsp;重置</a>-->
                        </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>折线图</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart" _echarts_instance_="1584684661547"
                         style="background-color: rgba(0, 0, 0, 0); cursor: default;">
                        <div style="position: relative; overflow: hidden; width: 458px; height: 240px;">
                            <div style="position: absolute; left: 0px; top: 0px; width: 575px; height: 240px; user-select: none;"
                                 width="718.75" height="300" data-zr-dom-id="bg"></div>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="0"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="1"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="2"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="3"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="4"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="6"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="8"></canvas>
                            <canvas style="position: absolute; left: 0px; top: 0px; width: 458px; height: 240px; user-select: none;"
                                    width="572.5" height="300" data-zr-dom-id="_zrender_hover_"></canvas>
                            <div style="position: absolute; display: none; border-style: solid; white-space: nowrap; transition: left 0.4s ease 0s, top 0.4s ease 0s; background-color: rgba(0, 0, 0, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); text-decoration: none; font-family: Arial, Verdana, sans-serif; font-size: 12px; line-height: 18px; font-style: normal; font-weight: normal; padding: 5px; left: 177px; top: 159px;">
                                周三<br>最高气温 : 15<br>最低气温 : 2
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>时间</th>
                                <th>支付数量</th>
                                <th>订单金额</th>
                                <td>交易用户数</td>
                                <th>退款订单数</th>
                                <th>退款金额</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each=" info: ${orderStatisticListInfo}">
                                <td th:text="${info.dateStr}"></td>
                                <td th:text="${info.payOrderNum}"></td>
                                <td th:text="${info.orderAmount}"></td>
                                <td th:text="${info.transactionUserNum}"></td>
                                <td th:text="${info.refundOrderNum}"></td>
                                <td th:text="${info.refundAmount}"></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <div class="row" style="margin-bottom: 10px;">
        <div class="col-sm-12">
    <span>合计：订单金额：¥ <span th:text="${orderStatisticTotalInfo.totalOrderAmount}"></span>，
    退款金额：¥ <span th:text="${orderStatisticTotalInfo.totalRefundAmount}"></span>，
    支付净额： ¥ <span th:text="${orderStatisticTotalInfo.totalPayAmount}"></span></span>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/plugins/echarts/echarts-all.js}"></script>
<!--<script th:src="@{/js/demo/echarts-demo.min.js}"></script>-->
<!--<script src="js/jquery.min.js?v=2.1.4"></script>-->
<!--<script src="js/bootstrap.min.js?v=3.3.5"></script>-->
<!--<script src="js/content.min.js?v=1.0.0"></script>-->
<script th:inline="javascript">
    $(function () {
        var orderStatisticListInfo = [[${orderStatisticListInfo}]];
        console.log(orderStatisticListInfo)
        var xAxisData = [];
        var payOrderNum = []
        var payAmount = []
        for (var i = 0; i < orderStatisticListInfo.length; i++) {
            xAxisData.push(orderStatisticListInfo[i].dateStr);
            payOrderNum.push(orderStatisticListInfo[i].payOrderNum)
            payAmount.push(orderStatisticListInfo[i].payAmount)
        }
        var dataInfo = {
            title: {text: "本月订单统计"},
            tooltip: {trigger: "axis"},
            legend: {data: ["支付订单数", "订单金额"]},
            grid: {x: 40, x2: 40, y2: 24},
            calculable: !0,
            xAxis: [{type: "category", boundaryGap: !1, data: xAxisData}],
            yAxis: [{type: "value", axisLabel: {formatter: "{value}"}}],
            series: [{
                name: "支付订单数",
                type: "line",
                data: payOrderNum,  // 数据
            }, {
                name: "订单金额",
                type: "line",
                data: payAmount,// 数据
            }]
        }
        var e = echarts.init(document.getElementById("echarts-line-chart")), a = dataInfo;
        e.setOption(a), $(window).resize(e.resize);
    });

    function dateFilteType() {
        var dateFilteType = $("#dateFilteType").val();
        location.href = ctx + "admin/adminOrderStatistic?dateFilteType=" + dateFilteType;
    }
</script>
</body>
</html>

